<!DOCTYPE html>
<html>
<head>
	<title>react-component-父孙组件传值</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    
</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    class ParentList extends React.Component{
        constructor(){
            super();
            this.state = {
                name:'ParentList'
            };
        };
        render(){ 
            var _this = this;
            return (
                <div>
                    {
                        this.props.arr.map(function(item,index){
                        return <ChildList msg="hello world" n={item.name} name={_this.state.name}/>
                        })
                    }
                </div>
                )
        }
    };
    class ChildList extends React.Component{
        constructor(){
            super();
            this.state = {
                name:'ChildList'
            };
        };
        render(){ 
            return (
                <div>
                   <p>{this.props.msg}</p>
                   <p>{this.props.name}</p>
                   <SunList n={this.props.n} name={this.state.name}/>
                </div>
                )
        }
    };
    class SunList extends React.Component{
        constructor(){
            super();
            this.state = {
                name:'SunList'
            };
        };
        render(){ 
            return (
                <div>
                   <h1>{this.props.n}</h1>
                   <h2>{this.props.name}</h2>
                </div>
                )
        }
    };
     ReactDOM.render(
          <ParentList arr={[{name:'x',id:1},{name:'y',id:2},{name:'z',id:3}]}/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>